<template>
    <!-- <baidu-map :center= "center" :zoom= "zoom" @ready= "handler" style="height:1080px" @click= "getClickInfo" :scroll-wheel-zoom= 'true'> -->
    <baidu-map ak='NS6TVpbaQhCfnn4RhLDviBnW5wZNMq2p' :center= "center" :zoom= "zoom" @ready= "handler" style="height:1080px" @click= "getClickInfo" :scroll-wheel-zoom= 'true'></baidu-map>
</template>

<script>

// import { BaiduMap, BmScale, BmGeolocation } from 'vue-baidu-map'

import { BaiduMap, BmScale, BmGeolocation } from 'vue-baidu-map'


export default {
  name: 'TestBaiDu',
  components: {BaiduMap},
  mounted () {
    
  },
  data () {
    return {
      center: {lng: 109.45744048529967, lat: 36.49771311230842},
      zoom: 13
    }
  },
  methods: {
    handler ({BMap, map}) {
      var point = new BMap.Point(109.49926175379778, 36.60449676862417)
      map.centerAndZoom(point, 13)
      var marker = new BMap.Marker(point) // 创建标注
      map.addOverlay(marker) // 将标注添加到地图中
      var circle = new BMap.Circle(point, 6, { strokeColor: 'Red', strokeWeight: 6, strokeOpacity: 1, Color: 'Red', fillColor: '#f03' })
      map.addOverlay(circle)
    },
    getClickInfo (e) {
      console.log(e.point.lng)
      console.log(e.point.lat)
      this.center.lng = e.point.lng
      this.center.lat = e.point.lat
    }
  }
}
</script>

<style scoped>
  .baiduMap {
    height: 100%;
    width: 100%;
  }
</style>
